<template>
  <div class="hello">

    <!--<mt-cell
      title="标题文字"
      to="InfoList"
      is-link
      value="带链接">
    </mt-cell>-->
    <!--<mt-swipe :auto="4000">
      <mt-swipe-item><img src="./college.jpg" alt=""></mt-swipe-item>
      <mt-swipe-item><img src="./college.jpg" alt=""></mt-swipe-item>
      <mt-swipe-item><img src="./college.jpg" alt=""></mt-swipe-item>
    </mt-swipe>-->
    <div style="text-align:center;padding-top:35px;padding-bottom:10px">
      <img src="./college.jpg" alt="太原科技大学">
    </div>
    <mt-field  placeholder="账号" v-model="username" ></mt-field>
    <mt-field  placeholder="密码" type="password" v-modal="password"></mt-field>
    <mt-button type="primary" size="large" style="width:99%;margin:0 auto" @click="handleLogin">登录</mt-button>

  </div>
</template>

<script>
  import { Toast } from 'mint-ui';
export default {
  name: 'hello',
  data () {
    return {
        username:'lizhaowen',
        password:'',
    }
  },
  methods:{
    handleLogin:function(){
          if(this.username=="lizhaowen"){
                /*Toast({
                    message: '登陆成功1',
                    position: 'center',
                    iconClass: 'icon icon-success',
                    duration: 500
                  });*/
                this.openToastWithIcon();
                  this.$router.push({name:'InfoList'});
          }
          else if(this.username=="lianheng"){

            this.openToastWithIcon();
            this.$router.push({name:'MainContent'});
          }
          else{
              this.loginError();
          }

    },
    openToastWithIcon() {
      Toast({
        message: '登录成功',
        iconClass: 'mintui mintui-success',
        duration:500
      });
    },
    loginError(){
      Toast({
        message: '登录失败',
        iconClass: 'mintui mintui-failed',
        duration:800
      });
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a{
  color:rgb(38,162,255);

}
</style>
